 <template>
    <div>
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px" :status-icon="true">
            <el-form-item label="编码" prop="code">
                <el-input v-model="form.code" style="width: 370px;" />
            </el-form-item>
            <el-form-item label="名称" prop="name">
                <el-input v-model="form.name" style="width: 370px;" />
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="form.remark" :rows="3" type="textarea" style="width: 370px;" />
            </el-form-item>

            <!-- <el-button type="primary" @click="print">打印数据</el-button> -->
            <!-- <el-button v-if="editable" size="small" type="primary" @click="handleAdd()">添加</el-button> -->
            <el-table ref="table" v-loading="false" :data="form.details" size="small" :row-style="{height:20+'px'}" :cell-style="{padding:0+'px'}"
                :header-cell-style="{background:'#F5F7FA',color:'#606266', height:'40px', padding:'0px','text-align':'center'}"
>
                <el-table-column type="index" align="center" width="50" label="序号" />
                <el-table-column prop="productCode" label="产品编码" align="center" min-width="150px">
                    <template slot-scope="scope">
                        <el-form-item :prop="'details['+scope.$index+'].productCode'" :rules="rules.detailsproductCode" :inline-message="true" class="custom-incell-el-form-item" label-width="0px">
                            <el-input v-model="scope.row.productCode" :disabled="true">
                                <span slot="append" style="cursor: pointer;" @click="handleReselectProduct(scope.$index, scope.row)">
                                    重选
                                </span>
                            </el-input>

                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column prop="productName" label="产品名称" align="center" min-width="150px" />
                <el-table-column prop="productSpecification" label="产品规格" align="center" />
                <el-table-column prop="quantity" label="数量" align="center" width="140px">
                    <template slot-scope="scope">
                        <!-- :show-message="false"  -->
                        <el-form-item :prop="'details['+scope.$index+'].quantity'" :rules="rules.detailsquantity" class="custom-incell-el-form-item" label-width="0px">

                            <el-input-number v-model="scope.row.quantity" :min="1" />
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column prop="unit" label="单位" align="center" width="100px">
                    <template slot-scope="scope">
                        <el-form-item :prop="'details['+scope.$index+'].unit'" :rules="rules.detailsunit" class="custom-incell-el-form-item" label-width="0px">

                            <el-select v-model="scope.row.unit" filterable placeholder="">
                                <el-option v-for="item in dict.product_package_unit" :key="item.id" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" align="center">
                    <template slot-scope="scope">
                        <el-form-item class="custom-incell-el-form-item" label-width="0px">
                            <el-input v-model="scope.row.remark" />
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column v-if="editable" label="操作" width="50px" align="center " fixed="right">
                    <template slot-scope="scope">
                        <!-- <span class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;" @click="handleDelete(scope.$index, scope.row)"> -->
                        <!-- <i class="el-icon-close del" style="cursor: pointer;" width="10px" @click="handleDelete(scope.$index, scope.row)" /> -->
                        <!-- </span> -->
                        <svg-icon icon-class="delete" class="del" @click="handleDelete(scope.$index, scope.row)" />
                        <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
                        <!-- <el-button  icon="el-icon-close" circle size="mini" @click="handleDelete(scope.$index, scope.row)" /> -->
                    </template>
                </el-table-column>
                <div v-if="editable" slot="append" class="el-table-add-row" style="width: 100%;" @click="handleAdd()"><span>+ 添加</span></div>
            </el-table>
        </el-form>

        <el-dialog width="70%" title="选择产品" :visible.sync="innerVisible" append-to-body>
            <productView ref="productSelector" />
            <el-button type="info" @click="cancel">取消</el-button>
            <el-button :loading="crud.status.cu === 2" type="primary" @click="ok">确认</el-button>
        </el-dialog>
    </div>
</template>
<script>
import { form } from '@crud_my/crud'
import productView from '@/views/hqmes/product/index.vue'
import EditableCell from '@/components/inputs/EditableCell.vue'
import dict from '../../../api/system/dict'
const fitWidth = '1100px'

export default {
  components: { productView, EditableCell },
  mixins: [form()],
  dicts: ['warehouse_type', 'data_status', 'product_package_unit'],

  props: {},
  data() {
    return {
      form: this.crud.form,
      rules: {
        code: [{ required: true, message: '编码不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
        detailsquantity: [{ required: true, message: '数量不能为空', trigger: 'blur' }],
        detailsunit: [{ required: true, message: '单位不能为空', trigger: 'blur' }],
        detailsproductCode: [{ required: true, message: '产品编号不能为空', trigger: 'blur' }]
      },

      permission: {
        add: ['admin', 'inrecord:add'],
        edit: ['admin', 'inrecord:edit'],
        del: ['admin', 'inrecord:del']
      },
      innerVisible: false,
      editable: false,
      detailToEdit: null
    }
  },
  created() {
    this.editable = this.checkPer(['admin', 'inrecord:edit', 'inrecord:del'])
    this.$emit('fitWidth', fitWidth)
  },
  methods: {
    print() {
      console.log(this.form.details)
    },
    handleAdd() {
      if (this.$refs.productSelector) {
        this.$refs.productSelector.crud.resetQuery()
      }
      this.innerVisible = true
    },
    cancel() {
      this.detailToEdit = null
      this.innerVisible = false
    },
    ok() {
      //   var productsToAdd = this.productsToAdd
      var productSelected = this.$refs.productSelector.crud.selections
      if (!this.detailToEdit) {
        this.toAddDetail(productSelected)
      } else {
        this.toEditDetail(this.detailToEdit, productSelected)
      }
    },
    toAddDetail(productsToAdd) {
      if (productsToAdd && productsToAdd.length > 0) {
        var details = this.form.details
        productsToAdd.map(product => {
          var newDetail = {
            product: product,
            productName: product.name,
            productCode: product.code,
            productSpecification: product.specification,
            unit: this.dict.product_package_unit[0].value
          }
          details.push(newDetail)
        })
        this.cancel()
      } else {
        this.$notify.error({
          title: '错误',
          message: '请选择产品'
        })
      }
    },
    toEditDetail(detail, productSelected) {
      if (productSelected && productSelected.length === 1) {
        const product = productSelected[0]
        if (product) {
          this.$set(detail, 'product', product)
          this.$set(detail, 'productName', product.name)
          this.$set(detail, 'productCode', product.code)
          this.$set(detail, 'productSpecification', product.specification)
          this.cancel()
        } else {
          this.$notify.error({
            title: '错误',
            message: '请选择产品'
          })
        }
      } else {
        this.$notify.error({
          title: '错误',
          message: '请选择产品'
        })
      }
    },
    handleDelete(rowIndex, rowData) {
      const ids = rowData.productCode || rowIndex + 1
      this.$confirm('是否确认移除"' + ids + '"?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          return this.form.details.splice(rowIndex, 1)
        })
        .then(async() => {})
        .catch(function(e) {
          console.log(e)
        })
    },
    handleReselectProduct(rowIndex, rowData) {
      this.detailToEdit = rowData
      this.handleAdd()
    }
  }
}
</script>
<style scoped>
.el-table-add-row {
    margin-top: 10px;
    width: 100%;
    height: 34px;
    border: 1px dashed #c1c1cd;
    border-radius: 3px;
    cursor: pointer;
    justify-content: center;
    display: flex;
    line-height: 34px;
}
.custom-incell-el-form-item {
    margin-top: 20px;
}

.el-form-item.is-error {
    margin-bottom: 15px;
}
.del {
    width: 18px;

    height: 18px;
}
.del:hover {
    border: 1px solid #b1afaf48;
    background: #dacfcfa1;
    border-radius: 50%;
    cursor: pointer;
    width: 25px;
    height: 25px;
}
</style>
